<script setup lang="ts">
import { computed } from 'vue';
import type { BlogPost } from '@/types';
import { useBlogStore } from '@/stores/blogStore';

const blogStore = useBlogStore();

// 获取最新的4篇已发布文章
const recentPosts = computed(() => {
  return blogStore.getPublishedPosts.slice(0, 4);
});

// 截断内容
const truncateContent = (content: string): string => {
  if (content.length <= 120) return content;
  return content.substring(0, 120) + '...';
};

// 格式化日期
const formatDate = (dateStr: string): string => {
  if (!dateStr) return '';
  const date = new Date(dateStr);
  
  // 使用更小巧的日期格式
  const options: Intl.DateTimeFormatOptions = { 
    year: 'numeric', 
    month: 'short', 
    day: 'numeric' 
  };
  
  return new Intl.DateTimeFormat('zh-CN', options).format(date);
};
</script>

<template>
  <main class="min-h-screen bg-base-100">
    <!-- 英雄区域 -->
    <div class="hero bg-base-200 py-20">
      <div class="hero-content text-center fade-in">
        <div class="max-w-3xl">
          <h1 class="text-6xl font-bold mb-4">Vue 博客系统</h1>
          <p class="py-6 text-lg opacity-80">一个现代化、简洁、功能丰富的博客系统，基于 Vue 3 和 TypeScript 构建。</p>
          <div class="flex justify-center gap-4">
            <RouterLink to="/blog" class="btn btn-primary btn-lg hover-lift">查看博客</RouterLink>
            <RouterLink to="/editor" class="btn btn-outline btn-lg hover-lift">写文章</RouterLink>
          </div>
        </div>
      </div>
    </div>

    <!-- 最新文章区域 -->
    <div class="blog-container py-16">
      <h2 class="text-4xl font-bold mb-12 text-center fade-in">最新文章</h2>
      
      <div v-if="recentPosts.length > 0" class="card-grid">
        <div v-for="(post, index) in recentPosts" :key="post.id" 
             class="post-card"
             :style="{animationDelay: index * 0.1 + 's'}"
             :class="{'fade-in': true}">
          <div class="relative">
            <div v-if="post.coverImage">
              <img :src="post.coverImage" :alt="post.title" class="h-52 w-full object-cover" />
            </div>
            <div v-else class="h-52 bg-base-300 flex items-center justify-center">
              <icon-heroicons-photo class="w-16 h-16 opacity-20" />
            </div>
            <!-- 日期标签 -->
            <div class="absolute bottom-3 left-3 bg-base-100 px-3 py-1 rounded-full text-sm shadow-md">
              {{ formatDate(post.publishedAt) }}
            </div>
          </div>
          <div class="p-6">
            <h3 class="card-title text-xl font-bold mb-3 line-clamp-2">{{ post.title }}</h3>
            <p class="opacity-70 mb-4 line-clamp-3">{{ post.excerpt || truncateContent(post.content) }}</p>
            <div class="flex items-center justify-between mt-auto">
              <div class="flex items-center">
                <icon-heroicons-user class="w-4 h-4 mr-1 opacity-60" />
                <span class="text-sm opacity-60">{{ post.author || 'Anonymous' }}</span>
              </div>
              <RouterLink :to="`/blog/${post.id}`" class="btn btn-sm btn-primary rounded-full gap-1">
                阅读全文
                <icon-heroicons-arrow-right class="w-4 h-4" />
              </RouterLink>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 无文章提示 -->
      <div v-else class="text-center py-16 fade-in">
        <icon-heroicons-question-mark-circle class="w-24 h-24 mx-auto text-base-300 mb-6" />
        <p class="mt-4 text-xl mb-8">还没有发布的文章</p>
        <RouterLink to="/editor" class="btn btn-primary btn-lg hover-lift">写第一篇文章</RouterLink>
      </div>
    </div>

    <!-- 功能特点区域 -->
    <div class="bg-base-200 py-20">
      <div class="blog-container">
        <h2 class="text-4xl font-bold mb-12 text-center fade-in">功能特点</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <!-- 功能卡片1 -->
          <div class="card bg-base-100 shadow-xl hover-lift fade-in" style="animation-delay: 0.1s">
            <div class="card-body items-center text-center">
              <div class="w-16 h-16 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mb-4">
                <icon-heroicons-pencil-square class="w-8 h-8 text-primary" />
              </div>
              <h3 class="card-title text-xl mb-2">多种编辑器</h3>
              <p class="opacity-70">支持 Markdown 和富文本编辑器，满足不同写作偏好</p>
            </div>
          </div>
          
          <!-- 功能卡片2 -->
          <div class="card bg-base-100 shadow-xl hover-lift fade-in" style="animation-delay: 0.2s">
            <div class="card-body items-center text-center">
              <div class="w-16 h-16 rounded-full bg-secondary bg-opacity-10 flex items-center justify-center mb-4">
                <icon-heroicons-tag class="w-8 h-8 text-secondary" />
              </div>
              <h3 class="card-title text-xl mb-2">标签管理</h3>
              <p class="opacity-70">通过标签对博客进行分类整理，方便内容管理</p>
            </div>
          </div>
          
          <!-- 功能卡片3 -->
          <div class="card bg-base-100 shadow-xl hover-lift fade-in" style="animation-delay: 0.3s">
            <div class="card-body items-center text-center">
              <div class="w-16 h-16 rounded-full bg-accent bg-opacity-10 flex items-center justify-center mb-4">
                <icon-heroicons-arrow-down-tray class="w-8 h-8 text-accent" />
              </div>
              <h3 class="card-title text-xl mb-2">导入导出</h3>
              <p class="opacity-70">支持博客数据的导入导出，便于数据备份和迁移</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 关于/订阅区域 -->
    <div class="bg-base-100 py-16">
      <div class="blog-container">
        <div class="card bg-primary text-primary-content shadow-xl fade-in">
          <div class="card-body text-center p-10">
            <h2 class="text-3xl font-bold mb-4">准备好开始写博客了吗？</h2>
            <p class="mb-6 max-w-2xl mx-auto">这个现代化的博客系统可以帮助你轻松创建、管理和分享你的内容。</p>
            <div class="flex justify-center">
              <RouterLink to="/editor" class="btn bg-white text-primary hover:bg-opacity-90 btn-lg">
                开始写作
                <icon-heroicons-arrow-right class="w-5 h-5 ml-1" />
              </RouterLink>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<style scoped>
/* 渐入动画的细节调整 */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn 0.8s ease-out forwards;
}

/* 卡片悬浮效果的增强 */
.post-card {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.post-card:hover {
  transform: translateY(-8px);
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
